<template>
	<view class="">
		<!-- #ifdef MP-WEIXIN -->
			<shopro-login-modal></shopro-login-modal>
		<!-- #endif -->
		
		<view class="page">
				<view class="top">
					<view class="title">
						<view class="icon" @click="goBack()">
							<u-icon name="arrow-left"  size="50"></u-icon>
						</view>
						我的推广
					</view>
					<view class="titleInfo">
						<view class="left-box">
							<view class="infoItem">
								<view class="num">
									{{pageObj.total_commission}}
								</view>
								<view class="label">
									累计收入
								</view>
							</view>
							<view class="infoItem">
								<view class="num">
									{{pageObj.account}}
								</view>
								<view class="label">
									可提收入
								</view>
							</view>
						</view>
						<view class="right" @click="withdrawalBalance">
							提到余额
						</view>
					</view>
				</view>
				
				<view class="center-box" >
					<view class="item">
						<view class="num" @click="goPage('/pages/prefile/promoteCenter/incomeDetail',{type: 'recommend_achievement'})">
							{{pageObj.recommend_achievement}}
						</view>
						<view class="label">
							直推业绩奖
						</view>
					</view>
					<view class="item" @click="goPage('/pages/prefile/promoteCenter/incomeDetail',{type: 'open_term'})">
						<view class="num">
							{{pageObj.open_term}}
						</view>
						<view class="label">
							直推开团奖
						</view>
					</view>
					<view class="item" @click="goPage('/pages/prefile/promoteCenter/incomeDetail',{type: 'sale_achievement'})">
						<view class="num">
							{{pageObj.sale_achievement}}
						</view>
						<view class="label">
							销售业绩奖
						</view>
					</view>
					<view class="item" @click="goPage('/pages/prefile/promoteCenter/incomeDetail',{type: 'blindbox_welfare'})">
						<view class="num">
							{{pageObj.blindbox_welfare}}
						</view>
						<view class="label">
							盲盒福利奖
						</view>
					</view>
				</view>
				
				<view class="bottom-box" @click="goPage('/pages/prefile/promoteCenter/incomeDetail')">
					<view class="left-box">
						<image src="../../../static/images/other/order.png" mode=""></image>
						<text>收入明细</text>
					</view>
					<u-icon name="arrow-right" color="#9E9E9E" size="28"></u-icon>
				</view>
				
				
				
		</view>
	</view>
	
</template>

<script>
	import noMore from '@/components/noMore/noMore.vue'
	export default {
		data() {
			return {
				pageObj:{},
			};
		},
		components:{
			noMore
		},
		methods:{
			getUserInfo(){
				this.myHttp({
					url:'/fenxiao/api/Team/info',
				}).then(res=>{
					this.pageObj = res.data.info
				})
			},
			withdrawalBalance(){
				this.myHttp({
					url:'/fenxiao/api/withdraw/balance',
				}).then(res=>{
					if(res.code==0){
						this.getUserInfo()
						uni.showToast({
						    title: '提现成功',
						    duration: 3000,
						    icon: 'none'
						});
					}
				})
			}
		
		},
		filters:{
		},
		onLoad() {
			this.getUserInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: #F2F2F2;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		font-family: PingFang SC;
		
		.top{
			width: 750rpx;
			height: 426rpx;
			background: linear-gradient(118deg, #EC6921, #FA1111);
			.title{
				margin-top: 12%;
				display: flex;
				justify-content: center;
				position: relative;
				font-size: 30rpx;
				color: #fff;
				.icon{
					position: absolute;
					left: 2%;
					top: 50%;
					transform: translateY(-50%);
				}
			}
			.titleInfo{
				margin-top: 50rpx;
				padding: 20rpx 35rpx 26rpx 0;
				display: flex;
				align-items: center;
				color: #fff;
				.left-box{
					flex: 1;
					display: flex;
					.infoItem{
						flex: 1;
						@include flexCenter;
						flex-direction: column;
						color: #fff;
						.num{
							font-size: 40rpx;
							font-weight: 600;
						}
						.label{
							margin-top: 20rpx;
							font-size: 24rpx;
						}
					}
				}
				.right{
					width: 121rpx;
					height: 47rpx;
					border: 2rpx solid #FFFFFF;
					border-radius: 20rpx;
					font-size: 24rpx;
					@include flexCenter;
				}
			}
			
			
		}
		
		
		.center-box{
			margin-top: -100rpx;
			width: 700rpx;
			height: 344rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			flex-wrap: wrap;
			.item{
				@include flexCenter;
				flex-direction: column;
				width: 50%;
				border-bottom: 1px solid #eee;
				border-right: 1px solid #eee;
				&:nth-child(2) {
					border-right: 0;
				}
				&:nth-child(4) {
					border-right: 0;
				}
				&:nth-child(3) {
					border-bottom: 0;
				}
				&:nth-child(4) {
					border-bottom: 0;
				}
				.num{
					color: #000;
					font-size: 33rpx;
				}
				.label{
					margin-top: 20rpx;
					font-size: 24rpx;
					color: #828181;
				}
			}
			
		}
	
		
		.bottom-box{
			margin-top: 15rpx;
			width: 700rpx;
			height: 93rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20rpx;
			color: #000;
			.left-box{
				display: flex;
				align-items: center;
			}
			image{
				width: 47rpx;
				height: 47rpx;
				margin-right: 20rpx;
			}
			
		}
	}

</style>
